window.onload = function() {
    // 值得注意的是：只要三步：1、准备绘画颜料 2、开始绘画（路径、或则api绘画） 3、完成绘画（闭合路径、上色）
    let drawRect = function () {
        console.log('1、绘制两个长方形', arguments);
        let ctx = Array.from(arguments)[0];
        // 空心矩形
        ctx.strokeStyle = "red";
        ctx.strokeRect(0, 0, 100, 50);
        // 实心矩形
        ctx.fillStyle = 'skyblue';
        ctx.fillRect(120, 0, 50, 50);
        // 清除指定的矩形区域，然后这块区域会变的完全透明
        ctx.clearRect(0, 0, 130, 30);
    };

    let drawPath = function () {
        console.log('2、绘制路径', arguments);
        let ctx = Array.from(arguments)[0];
        // 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
        // 使用路径绘制图形需要一些额外的步骤：
        // 创建路径起始点
        // 调用绘制方法去绘制出路径
        // 把路径封闭
        // 一旦路径生成，通过描边或填充路径区域来渲染图形。
        ctx.beginPath();
        ctx.moveTo(60, 0);
        ctx.lineTo(150, 70);
        ctx.closePath();
        // ctx.strokeStyle = 'blue';
        ctx.stroke();

        // 绘制三角形
        ctx.beginPath();
        ctx.moveTo(150, 10);
        ctx.lineTo(240, 10);
        ctx.lineTo(240, 100);
        ctx.closePath();
        // ctx.stroke();
        ctx.fill();
    };

    let drawArc = function () {
        console.log('3、绘制圆弧', arguments);
        // arc(x, y, r, startAngle, endAngle, anticlockwise):
        // 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。a
        // nticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

        // radians=(Math.PI/180)*degrees   //角度转换成弧度

        // 注意：
        // 这里的度数都是弧度。
        // 0弧度是指的x轴正方向

        let ctx = Array.from(arguments)[0];
        ctx.beginPath();
        ctx.arc(100, 100, 30, 0, Math.PI / 2, false);
        ctx.stroke();
        // ctx.closePath();

        ctx.beginPath();
        ctx.arc(50, 50, 30, 0, -Math.PI / 2, true);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(250, 250, 50, -Math.PI / 2, Math.PI / 2, false);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(250, 250, 50, -Math.PI / 2, -Math.PI, true);
        ctx.closePath();
        ctx.fill();


         // arcTo(x1, y1, x2, y2, radius)
        // 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。
        ctx.beginPath();
        ctx.moveTo(300, 300);
        //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
        ctx.arcTo(400, 300, 400, 400, 40);
        ctx.lineTo(400, 400);
        ctx.closePath();
        ctx.stroke();
    };

    let drawQuadraticCurveTo = function() {
        let ctx = Array.from(arguments)[0];
        // 绘制二次贝塞尔曲线
        // quadraticCurveTo(cp1x, cp1y, x, y):
        // 说明：
        // ​ 参数1和2：控制点坐标
        // ​ 参数3和4：结束点坐标
        // ctx.beginPath();
        // ctx.moveTo(10, 200); //起始点
        // var cp1x = 40, cp1y = 100;  //控制点
        // var x = 200, y = 200; // 结束点
        // //绘制二次贝塞尔曲线
        // ctx.quadraticCurveTo(cp1x, cp1y, x, y);
        // // ctx.closePath();
        // ctx.stroke();

        // ctx.beginPath();
        // ctx.rect(10, 200, 10, 10);
        // ctx.rect(cp1x, cp1y, 10, 10);
        // ctx.rect(x, y, 10, 10);
        // ctx.fill();

        // 绘制三次贝塞尔曲线
        // bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
        // 说明：
        // ​ 参数1和2：控制点1的坐标
        // ​ 参数3和4：控制点2的坐标
        // ​ 参数5和6：结束点的坐标
        ctx.beginPath();
        ctx.moveTo(40, 200); //起始点
        var cp1x = 20, cp1y = 100;  //控制点1
        var cp2x = 100, cp2y = 120;  //控制点2
        var x = 200, y = 200; // 结束点
        //绘制二次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        ctx.stroke();
    
        ctx.beginPath();
        ctx.rect(40, 200, 10, 10);
        ctx.rect(cp1x, cp1y, 10, 10);
        ctx.rect(cp2x, cp2y, 10, 10);
        ctx.rect(x, y, 10, 10);
        ctx.fill();

    }

    let initCanvas = function(callback) {
        const canvas = document.querySelector('#mycanvas');
        // 检测支持性
        if (canvas.getContext('2d')) {
            let ctx = canvas.getContext('2d');
            callback && typeof callback == 'function' && callback(ctx);
        } else {
            alert('当前浏览器不支持canvas');
        }
    };
    let canvasCase = {
        drawRect,
        drawPath,
        drawArc,
        drawQuadraticCurveTo,
    };

    // initCanvas(canvasCase.drawRect);
    // initCanvas(canvasCase.drawPath);
    // initCanvas(canvasCase.drawArc);
    initCanvas(canvasCase.drawQuadraticCurveTo);
}